<template>
  <div id="app" class="min-h-screen">
          <!-- 顶部固定区域 -->
      <div class="fixed w-full top-0 z-50" style="background-color: #446084; height: 20px;">
        <div class="flex justify-end items-center h-full mr-4">
          <!-- 右侧图标 -->
          <div class="flex items-center space-x-1">
            <!-- Facebook 图标 -->
            <img 
              src="/src/static/image/facebook.svg" 
              alt="Facebook" 
              class="w-3 h-3 cursor-pointer hover:opacity-80 transition-opacity"
              @click="openFacebook"
            />
            <!-- Instagram 图标 -->
            <img 
              src="/src/static/image/instagram.svg" 
              alt="Instagram" 
              class="w-4 h-4 cursor-pointer hover:opacity-80 transition-opacity"
              @click="openInstagram"
            />
            <!-- TikTok 图标 -->
            <img 
              src="/src/static/image/tiktok.svg" 
              alt="TikTok" 
              class="w-3 h-3 cursor-pointer hover:opacity-80 transition-opacity"
              @click="openTikTok"
            />
          </div>
        </div>
    </div>
    
    <!-- 导航栏 -->
    <nav class="fixed w-full top-5 z-40" style="background-color: #429a9c;">
      <div class="flex justify-end items-center pr-4" style="height: 90px;">
        <router-link to="/" class="px-3 py-2 text-sm font-bold" style="color: #d5e8e9;">FORSIDE</router-link>
        <router-link to="/behandlinger" class="px-3 py-2 text-sm font-bold" style="color: #d5e8e9;">BEHANDLINGER</router-link>
        <router-link to="/kontakt" class="px-3 py-2 text-sm font-bold" style="color: #d5e8e9;">KONTAKT OS</router-link>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <main>
      <router-view />
    </main>

  </div>
</template>

<script setup lang="ts">
// Web 端专用组件

// 社交媒体链接跳转函数
const openFacebook = () => {
  window.open('https://www.facebook.com/share/16hr226ZUa/?mibextid=wwXIfr', '_blank');
};

const openInstagram = () => {
  window.open('https://www.instagram.com/hayunaakupunktur?igsh=OHZtbmhodWg3ajAw&utm_source=qr', '_blank');
};

const openTikTok = () => {
  window.open('https://www.tiktok.com/@hayuna.acupunktur?_t=ZN-8zCBGVItRuI&_r=1', '_blank');
};
</script>

<style scoped>
/* 自定义样式 */
.router-link-active {
  color: white !important; /* 选中状态为白色 */
}

.router-link-active:hover {
  color: white !important; /* 选中状态悬浮时为白色 */
}

nav a:hover {
  color: white !important; /* 未选中状态悬浮时为白色 */
}
</style>